<template>
  <div id="fengyun">
    <div class="main">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
        <div class="fenyun-box" v-for="(item,index) in dataList" :key="index" @click="goToRead(item)">
          <div class="imgs">
            <img v-if="item.imgurl" :src="item.imgurl" alt="" width="86px" height="112px" />
            <img v-else src="../../../../static/book/book.png" alt="" width="86px" height="112px" />
          </div>
          <div class="fenyun-msg">
            <p class="fengyun-name">
              <span class="fengyun-title" v-html="item.bookName"></span>
              <span class="fengyun-num">{{item.count}}人阅读</span>
            </p>
            <p v-if="item.author">作者：{{item.author}}</p>
            <p v-else>作者：无</p>
            <p class="article" v-if="item.describ">{{item.describ}}</p>
            <p class="article" v-else>暂无简介</p>
          </div>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import baseurl from "../../../api/baseurl.js";
import { Loadmore, Indicator, Toast } from "mint-ui";
export default {
  data() {
    return {
      pageindex: 1,
      allLoaded: false,
      dataList: []
    };
  },
  created() {
    // name:"bookcontent"
  },
  mounted() {
    this.getData();
  },
  methods: {
    goToRead(e) {
      localStorage.setItem("bookId", e.fileid);
      this.$router.push({
        name: "bookcontent"
      });
    },
    loadTop() {
      //下拉加载
      console.log("下拉");
      this.pageindex = 1;
      this.getData();
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom() {
      // 上拉加载
      this.pageindex++;
      this.getData();
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    getData() {
      const accid = localStorage.getItem("accid");
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      this.$http({
        method: "post",
        url: baseurl.urls + "/readrecord/selectRankings",
        params: {
          pageNo: this.pageindex,
          pageSize: 10,
          edition: accid
        }
      })
        .then(response => {
          if (response.status == 200) {
            // console.log(response.data.date.list);
            // this.dataList = response.data.date.list;
            if (response.data.date.list.length === 0) {
              Toast("暂无数据");
              Indicator.close();
              return;
            }
            if (this.pageindex == 1) {
              this.dataList = response.data.date.list;
              console.log(this.dataList);
            } else {
              let data = this.dataList;
              this.dataList = data.concat(response.data.date.list);
            }
          }
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Toast("暂无数据");
        });
    }
  }
};
</script>

<style scoped>
.main {
  margin-top: 20px;
  height: 90vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.fenyun-box {
  display: flex;
  background: #ffffff;
  margin: 0 15px;
  align-items: center;

  margin: 0 auto;
  margin: 0 15px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  box-shadow: darkgrey 1px 1px 5px;
  margin-bottom: 10px;
}

.fenyun-box .imgs {
  width: 86px;
  height: 112px;
  margin: 12px 0;
  margin-left: 12px;
}

.fenyun-msg {
  margin-left: 15px;
  width: 100%;
  margin-right: 10px;
}

.fengyun-title {
  color: #252525;
  font-size: 15px;
  line-height: 30px;
  width: 60%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.fengyun-name .fengyun-num {
  color: #a1a1a1;
  font-size: 12px;
  line-height: 30px;
  margin-right: 12px;
}
.fenyun-msg p:nth-of-type(1) {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.fenyun-msg p:nth-of-type(2) {
  margin-bottom: 15px;
  color: #a1a1a1;
  font-size: 12px;
}
.fenyun-msg .article {
  margin-bottom: 15px;
  color: #a1a1a1;
  font: 12px/20px "microsoft yahei";
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
</style>